<template>
  <!-- 文章管理 -->
    <div class="essay">
      <el-form  ref="formInlineRef"
      :inline="true"
      :model="form"
      class="demo-form-inline">
        <el-form-item label="作者" style="width: 200px; margin-right: 7px;">
          <el-input v-model="form.author" />
        </el-form-item>
        <el-form-item label="标题" style="width: 200px;">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="文章类型" style="width: 200px;">
          <el-input v-model="form.type" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList" style="margin-left: -17px;">查询</el-button>
          <el-button  @click="resetForm(formInlineRef)">清空</el-button>
        </el-form-item>
      </el-form>
      <el-button style="margin-bottom: 10px;" type="danger"  @click="EssayAdd()">添加文章</el-button>
      <el-table :data="tableData" border stripe >
        <el-table-column prop="id" label="序号" width="80"/>
        <el-table-column prop="author" label="文章作者" width="100"  />
        <el-table-column prop="title" label="文章标题" width="150" />
        <el-table-column prop="cover" label="文章封面" width="200">
          <template #default="scope">
            <div class="courseInfo">
            <img
              :src="scope.row.cover"
              alt=""
              style="width: 200px; height: 200px"
            />
          </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="文章类型" width="100" />
        <el-table-column prop="content" label="文章内容" width="500" />
        <el-table-column prop="gmtCreate" label="创建时间" width="220" />
        <el-table-column prop="state" label="文章状态" width="100" >
          <template #default="scope">
            <el-tag v-if="scope.row.state === 0" type="danger" >异常</el-tag>  
            <el-tag v-else="scope.row.state === 1" type="success">正常</el-tag>
           
        </template>
        </el-table-column>
        <el-table-column label="操作" width="auto">
          <template #default="scope">
            <div class="buttons">
              <el-button type="primary" link @click="EssayAdd()">添加</el-button>
              <el-button type="warning" link @click="toEdit(scope.row.id)">编辑</el-button>
              <el-button type="danger" link @click="del(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px;" class="page">
          <!-- 分页组件 -->
    <el-config-provider :locale="locale">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getList"
        @current-change="getList"
      >
      </el-pagination>
    </el-config-provider>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from "vue";
  import { useRouter } from "vue-router";
  import imgUrl from "../../assets/img/6.jpg"
import { ElMessage, ElMessageBox, type Action, type FormInstance } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "../../assets/js/axios";

  
  const form = reactive({
    title: "",
    author: "",
    type:"",
  });
  const formInlineRef = ref<FormInstance>();
  const router=useRouter();
  const currentPage4 = ref(1);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const total = ref(0);
let locale = zhCn;
  const tableData = ref([]);

// 点击删除
const del = (id: number) => {
    ElMessageBox.alert("确认删除吗？", "提示", {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: "确认",
      callback: (action: Action) => {
        console.log(action);
        if (action === "confirm") {
          axios
            .del("/serviceedu/edu-essay/delEssay/" + id, {})
            .then((res: any) => {
              if (res.code === 200) {
                //提示删除成功
                ElMessage({
                  message: "删除数据成功",
                  type: "success",
                });
                // 刷新列表
                getList();
              }
            });
        }
      },
    });
  };
  // 分页器事件

  // 点击编辑
  const toEdit = (id: number) => {
    // 跳转添加页面
    router.push({ path: "/essayAdd", query: { id: id } });
  };
  

  // 定义分页+条件请求方法
  const getList = () => {
    axios
      .get("/serviceedu/edu-essay/getPageBatchs", {
        page: currentPage4.value,
        size: pageSize4.value,
        author: form.author,
        title: form.title,
        type: form.type,
      })
      .then((res: any) => {
        console.log(res);
        // 接收总条数
        total.value = res.data.total;
        // 接收列表数据
        tableData.value = res.data.list;
      });
  };
getList()
  const EssayAdd =()=>{
    router.push("/essayAdd")
  }
  const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  // 调用表单重置方法
  formEl.resetFields();
};
  </script>
  
  <style scoped>
  .buttons {
    display: flex;
  }
  </style>
  